<!-- 主页 -->
<template>
	<view class="container">
			<u-navbar title="首页" bg-color="#00000000" leftIcon=" " titleStyle="color:#fff" leftIconColor="#fff"
				placeholder is-back="false" back-icon-name="chat"></u-navbar>
		
		<view class="top">
			<view class="box">
				<u-icon name="map" color="black" size="28"></u-icon>
				<text>河南省郑州市中原区xx路</text>
			</view>
			<view class="box">
				<u-icon name="reload" color="blue" size="28"></u-icon>
				<span style="color: blue;">刷新</span>
			</view>
		</view>
		<view class="main">
			<navigator url="/pages/CarRepair/CarRepair">
				<view class="pic" style="background-color: #4C68F5;">
					<image src="/static/images/nav-icon1.png" mode="aspectFill" class="car"></image>
				</view>
				<view class="info">
					车辆维修
				</view>
			</navigator>
			<navigator url="/pages/CarMaintenance/CarMaintenance">
				<view class="pic" style="background-color: #FFA938;">
					<image src="/static/images/nav-icon2.png" mode="aspectFill"></image>
				</view>
				<view class="info">
					汽车保养
				</view>
			</navigator>
			<navigator url="/pages/WashCar/WashCar">
				<view class="pic" style="background-color: #5ADB2A;">
					<image src="/static/images/nav-icon3.png" mode="aspectFill"></image>
				</view>
				<view class="info">
					专业洗车
				</view>
			</navigator>
			<navigator url="/pages/NearbyGas/NearbyGas">
				<view class="pic" style="background-color: #4F95FD;">
					<image src="/static/images/nav-icon4.png" mode="aspectFill"></image>
				</view>
				<view class="info">
					就近加油
				</view>
			</navigator>
		</view>
		<view class="mains">
			<view class="map">
				<view>
					<span style="font-size: 20px;font-weight: bold;">附近加油站</span><br>
					<span>根据您的位置推荐最近的加油站</span>
				</view>
				<view class="box">
					<!-- <navigator url="#" > -->
						<span style="color: black;">更多</span>
						<u-icon name="arrow-right" color="black" size="18"></u-icon>
				<!-- 	</navigator> -->
				</view>

			</view>
			<view class="bd"></view>
		</view>
		<view class="mains">
			<view class="map">
				<view>
					<span style="font-size: 20px;font-weight: bold;">优惠团购</span><br>
					<span>优惠来袭，为您的爱车续航</span>
				</view>
				<view class="box">
				<!-- 	<navigator url="#" > -->
						<span style="color: black;">更多</span>
						<u-icon name="arrow-right" color="black" size="18"></u-icon>
				<!-- 	</navigator> -->
				</view>
			</view>
			<view class="lists">
				<view class="list">
					<image src="/static/images/card-box-icon.png"></image>
					<span>汽车惠民活动走入......</span>
				</view>
				<view class="list">
					<image src="/static/images/card-box-icon.png"></image>
					<span>汽车惠民活动走入......</span>
				</view>
				<view class="list">
					<image src="/static/images/card-box-icon.png"></image>
					<span>汽车惠民活动走入......</span>
				</view>
				<view class="list">
					<image src="/static/images/card-box-icon.png"></image>
					<span>汽车惠民活动走入......</span>
				</view>
			</view>
		</view>

		<TabBar></TabBar>
	</view>
</template>

<script>
	export default {
		data() {
			
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-image: url('../../static/images/header-bg.png');
		background-size: contain;
		background-repeat: no-repeat;

		.tops {
			position: relative;
			height: 60px;

			image {
				position: absolute;
				top: 20px;
				left: 15px;
				width: 20px;
				height: 20px;
			}

			text {
				font-size: 20px;
				color: white;
				position: absolute;
				line-height: 60px;
				left: 45%;
			}
		}

		.top {
			display: flex;
			justify-content: space-between;
			padding: 15px 10px;
			border-radius: 30px/30px;
			background-color: white;
			margin: 15px;
			margin-bottom: 40px;

			.box {
				display: flex;
				justify-content: center;
				line-height: 28px;
			}
		}

		.main {


			display: flex;
			justify-content: space-evenly;
			background-color: white;
			margin: 15px;
			border-radius: 10px/10px;

			.pic {
				width: 80px;
				height: 80px;
				border-radius: 10px/10px;
				margin-bottom: 10px;
				margin-top: 40px;
			}

			.info {
				line-height: 20px;
				text-align: center;
				margin-bottom: 30px;
			}

			image {
				margin: 20px 20px;
				width: 40px;
				height: 40px;
			}

			.car {
				height: 30px;
				width: 60px;
				margin: 25px 10px;
			}
		}

		.mains {
			padding: 10px;
			background-color: white;
			margin: 15px;
			border-radius: 10px/10px;

			.map {
				display: flex;
				justify-content: space-between;

				.box {
					display: flex;
					justify-content: center;
					line-height: 67px;
				}
			}

			.bd {
				height: 250px;
			}

			.lists {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.list {
					width: 45%;
					height: 150px;
					margin-top: 10px;

					image {
						width: 100%;
						height: 120px;
						margin-bottom: 5px;
						border-radius: 10px/10px;
					}
				}
			}
		}

	}
</style>